<template>
  <!-- 44摆位上传-->
  <component wd="900" :is="cfg.model" v-model:window_open="val.md_pos_up" :title="`新增`">
    <template #content>
      <component :is="comp.pos_up.comp" :val="val" :ct="ct" />
    </template>
  </component>

  <div class="_box0">
    <n-space style="margin-bottom: 12px">
      <n-button type="warning" @click="val.md_pos_up = true">上传新站位</n-button>
    </n-space>

    <n-hr style="margin-bottom: 0px" />
    <n-tabs type="line" :value="val.posdata.tab" @update:value="ct.pos_cktab"
      ><n-tab-pane
        :name="item.value"
        :tab="item.name"
        v-for="item in val.posdata.tablist"
    /></n-tabs>
    <span class="tips">{{ v.tips }}</span>
    <n-hr />
    <div class="pos_tabbase">
      <div class="pos_tabmain" v-for="(item0, key0) in v.poslist">
        <!-- 站位棋盘 -->
        <div class="pos_main">
          <div class="pos_atk">
            <template v-for="(item1, key1) in v.x5">
              <template v-for="(item2, key2) in v.x4">
                <div>
                  <template v-if="item0.atk_pos['x' + key2 + 'y' + key1]">
                    <img
                      :class="`posatkicon def_y${key1}_x${key2}`"
                      :src="cfg.function.ava(item0.atk_pos['x' + key2 + 'y' + key1])"
                    />
                  </template>
                  <template v-else>
                    <img :class="`posatkicon def_y${key1}_x${key2}`" :src="img_xatk" />
                  </template>
                </div>
              </template>
            </template>
          </div>

          <div class="pos_def">
            <template v-for="(item1, key1) in v.x5">
              <template v-for="(item2, key2) in v.x4">
                <div>
                  <template v-if="item0.def_pos['x' + key2 + 'y' + key1]">
                    <img
                      :class="`posatkicon def_y${key1}_x${key2}`"
                      :src="cfg.function.ava(item0.def_pos['x' + key2 + 'y' + key1])"
                    />
                  </template>
                  <template v-else>
                    <img :class="`posatkicon def_y${key1}_x${key2}`" :src="img_xdef" />
                  </template>
                </div>
              </template>
            </template>
          </div>
        </div>
        <!-- 站位按钮 -->
        <n-space justify="center" style="margin-top: 10px">
          <n-button size="small" @click="ct.pos_gjdw('gj', item0)">
            <i class="el-icon"
              ><svg
                width="36"
                height="36"
                viewBox="0 0 36 36"
                xmlns="http://www.w3.org/2000/svg"
                class="icon"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M9.77234 30.8573V11.7471H7.54573C5.50932 11.7471 3.85742 13.3931 3.85742 15.425V27.1794C3.85742 29.2112 5.50932 30.8573 7.54573 30.8573H9.77234ZM11.9902 30.8573V11.7054C14.9897 10.627 16.6942 7.8853 17.1055 3.33591C17.2666 1.55463 18.9633 0.814421 20.5803 1.59505C22.1847 2.36964 23.243 4.32583 23.243 6.93947C23.243 8.50265 23.0478 10.1054 22.6582 11.7471H29.7324C31.7739 11.7471 33.4289 13.402 33.4289 15.4435C33.4289 15.7416 33.3928 16.0386 33.3215 16.328L30.9883 25.7957C30.2558 28.7683 27.5894 30.8573 24.528 30.8573H11.9911H11.9902Z"
                ></path></svg></i
            ><span style="padding-left: 5px">{{ item0.gj }}</span>
          </n-button>
          <n-button size="small" @click="ct.pos_gjdw('dw', item0)">
            <i class="el-icon" style="transform: rotate(180deg)"
              ><svg
                width="36"
                height="36"
                viewBox="0 0 36 36"
                xmlns="http://www.w3.org/2000/svg"
                class="icon"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M9.77234 30.8573V11.7471H7.54573C5.50932 11.7471 3.85742 13.3931 3.85742 15.425V27.1794C3.85742 29.2112 5.50932 30.8573 7.54573 30.8573H9.77234ZM11.9902 30.8573V11.7054C14.9897 10.627 16.6942 7.8853 17.1055 3.33591C17.2666 1.55463 18.9633 0.814421 20.5803 1.59505C22.1847 2.36964 23.243 4.32583 23.243 6.93947C23.243 8.50265 23.0478 10.1054 22.6582 11.7471H29.7324C31.7739 11.7471 33.4289 13.402 33.4289 15.4435C33.4289 15.7416 33.3928 16.0386 33.3215 16.328L30.9883 25.7957C30.2558 28.7683 27.5894 30.8573 24.528 30.8573H11.9911H11.9902Z"
                ></path></svg></i
            ><span style="padding-left: 5px">{{ item0.dw }}</span>
          </n-button>
        </n-space>
        <!-- 编队顺序 -->
        <template v-if="item0.atksort != null && item0.atksort.length >= 4">
          <n-hr />
          <div class="pos_team_soft_main">
            <span style="color: var(--base-font-hover-color)">进攻编队　</span>
            <div class="_box">
              <img
                style="width: 30px"
                class="pvp44ava"
                :src="cfg.function.ava(item2)"
                v-for="item2 in item0.atksort"
              />
            </div>
          </div>
          <div class="pos_team_soft_main">
            <span style="color: var(--base-font-hover-color)">防守编队　</span>
            <div class="_box">
              <img
                style="width: 30px"
                class="pvp44ava"
                :src="$cfg.function.ava(item2)"
                v-for="item2 in item0.defsort"
              />
            </div>
          </div>
        </template>
        <!-- 站位作者留言 -->
        <template v-if="item0.msg != null && item0.msg >= 1">
          <n-hr />
          <span style="color: var(--base-font-hover-color); font-size: 11px"
            >上传人留言：</span
          >{{ item0.msg }}
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import img_xatk from "@/assets/img/ep01.png";
import img_xdef from "@/assets/img/ep02.png";
import img_cap from "@/assets/img/cap01.png";
import img_defcap from "@/assets/img/cap02.png";
import { cfg } from "@/cfg/cfg.js";
export default {
  props: {
    val: {
      required: true,
    },
    ct: {
      required: true,
    },
  },
  setup(props) {
    let { ct, val } = props;

    const comp = {
      pos_up: {
        comp: defineAsyncComponent(() => import("./pvp_work_pos/up.vue")),
        mdname: "md_pos_up",
        text: {
          title: "竞技场摆位上传",
        },
      },
      pos_bbs: {
        comp: defineAsyncComponent(() => import("./pvp_work_pos/bbs.vue")),
        mdname: "md_pos_bbs",
        text: {
          title: "摆位留言",
        },
      },
      tomddr: defineAsyncComponent(() => import("@/views/gt/comp/tongyong/to_mddr.vue")),
    };

    if (val.posid == null) {
      //非法查询关闭窗口
      val.md_pos = false;
      return false;
    }

    // 初始化数据
    val.posdata = {
      x4: [[], [], [], []],
      x5: [[], [], [], [], []],
      tab: "so_atk_def",
      poslist: [],
      tablist: [
        {
          value: "so_atk_def",
          name: "同攻防",
        },
        {
          value: "so_atk",
          name: "同进攻",
        },
        {
          value: "so_def",
          name: "同防守",
        },
      ],
      tips: null,
      def_tips: "正在查询中...",
    };
    // 拷贝
    let v = val.posdata;

    //站位留言
    ct.pos_bbs = (psdata) => {
      val.psdata = psdata;
      val.md_pos_bbs = true;
    };

    ct.pos_cktab = async (ck) => {
      v.tab = ck;
      v.tips = v.def_tips;

      let qs = {};

      if (ck == "so_atk_def") {
        qs.where = "atk+def";
      } else {
        if (ck == "so_atk") {
          qs.where = "atk";
        } else {
          qs.where = "def";
        }
      }

      const res = await cfg.axios.get(`${cfg.url}`, {
        params: {
          t: "get/work/get_teampos",
          type: qs.where,
          md5: val.postm.md5,
          atk: val.postm.data.atk,
          def: val.postm.data.def,
        },
      });

      const data = res.data;
      if (data.code == 0) {
        v.poslist = data.data.data;
        v.tips = "共找到[" + data.data.count + "]条符合条件的站位";
      }
    };

    //站位点赞
    ct.pos_gjdw = async (type, posid) => {
      if (type == "gj") {
        posid.gj++;
      } else {
        posid.dw++;
      }
      const res = await cfg.axios.get(`${cfg.url}`, {
        params: {
          t: "get/work/pvpwork_pos_gj",
          posid: posid["_id"]["$oid"],
          type: type,
        },
      });
      const data = res.data;
      cfg.msg.info(data.msg, { duration: 2e3 });
      if (data.code == -1) {
        if (type == "gj") {
          posid.gj--;
        } else {
          posid.dw--;
        }
      }
    };

    //初始运行
    ct.pos_cktab(v.tab);

    return { v, comp, ct, val, cfg, img_xatk, img_xdef, img_cap, img_defcap };
  },
};
</script>
